<template>
  <div>
    <!-- 创建任务弹窗 -->
    <el-dialog v-el-drag-dialog title="创建任务" :visible.sync="centerDialogVisible" width="30%" :close-on-click-modal="false" top="5vh" :before-close="handleClosefn">
      <el-form ref="createTask" :model="createTask" size="mini" :rules="rules" @keyup.native.enter="createMainTask">
        <el-form-item label="主任务类型：" prop="taskType">
          <el-select v-model="createTask.taskType" @change="taskTypeChange" style="width:100%" placeholder="请选择主任务类型">
            <el-option v-for="item in mainTaskTypes" :key="item.value" :label="item.lable" :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- taskType 为 入库任务-->
        <template v-if="createTask.taskType === '1'">
          <el-form-item v-show="createTask.taskType" label="起始点：" prop="fromLoc">
            <el-select v-model="createTask.fromLoc" style="width:100%" placeholder="请选择设备">
              <el-option v-for="(item,index) in Machines" :key="index" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item v-show="createTask.taskType" label="目的点：" prop="toLoc">
            <el-cascader v-model="createTask.toLoc" placeholder="请选择货架" style="width:100%" :options="LocationCascader"></el-cascader>
          </el-form-item>
        </template>
        <!-- taskType 为  出库任务-->
        <template v-if="createTask.taskType === '2'">
          <el-form-item v-show="createTask.taskType" label="起始点：" prop="fromLoc">
            <el-cascader v-model="createTask.fromLoc" placeholder="请选择货架" style="width:100%" :options="LocationCascader"></el-cascader>
          </el-form-item>
          <el-form-item v-show="createTask.taskType" label="目的点：" prop="toLoc">
            <el-select v-model="createTask.toLoc" style="width:100%" placeholder="请选择设备">
              <el-option v-for="(item,index) in Machines" :key="index" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </template>
        <!-- taskType 为 移动任务 -->
        <template v-if="createTask.taskType === '3'">
          <el-form-item v-show="createTask.taskType" label="起始点：" prop="toLoc">
            <el-cascader v-model="createTask.fromLoc" placeholder="请选择货架" style="width:100%" :options="LocationCascader"></el-cascader>
          </el-form-item>
          <el-form-item v-show="createTask.taskType" label="目的点：" prop="toLoc">
            <el-cascader v-model="createTask.toLoc" placeholder="请选择货架" style="width:100%" :options="LocationCascader"></el-cascader>
          </el-form-item>
        </template>
        <!-- taskType 为 搬送任务-->
        <template v-if="createTask.taskType === '4'">
          <el-form-item v-show="createTask.taskType" label="起始点：" prop="fromLoc">
            <el-select v-model="createTask.fromLoc" style="width:100%" placeholder="请选择设备">
              <el-option v-for="(item,index) in Machines" :key="index" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item v-show="createTask.taskType" label="目的点：" prop="fromLoc">
            <el-select v-model="createTask.toLoc" style="width:100%" placeholder="请选择设备">
              <el-option v-for="(item,index) in Machines" :key="index" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </template>

        <el-form-item label="容器编号：" prop="unitId">
          <el-input v-model.trim="createTask.unitId" placeholder="请输入容器编号">
            <el-button slot="append" class="el-icon-edit" @click="renderNum"> 随机</el-button>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createMainTaskfn">确 定</el-button>
        <el-button @click="handleClosefn">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from "@/components/el-drag-dialog"; // base on element-ui
import { Message } from "element-ui";
import { createMaintaskApi } from "@/api/task";
export default {
  directives: { elDragDialog },
  props: {
    centerDialogVisible: {
      type: Boolean,
      required: true,
    },
    Machines: {
      type: Array,
      required: true,
    },
    LocationCascader: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      // 创建任务的数据
      createTask: {
        taskType: "",
        fromLoc: "", // 起始点
        // fromLoc: "0100101", // 起始点
        toLoc: "", // 目的点
        // toLoc: "0100102", // 目的点
        unitId: "", // 容器编号
      },
      // 表单校验数据
      rules: {
        taskType: [
          { required: true, message: "请选择任务类型", trigger: "blur" },
        ],
        fromLoc: [{ required: true, message: "请选择数据", trigger: "blur" }],
        toLoc: [{ required: true, message: "请选择数据", trigger: "blur" }],
        unitId: [
          { required: true, message: "容器编号不能为空", trigger: "change" },
        ],
      },
      //主任务类型下拉框
      mainTaskTypes: [
        { lable: "入库任务", value: "1" },
        { lable: "出库任务", value: "2" },
        { lable: "移动任务", value: "3" },
        { lable: "搬送任务", value: "4" },
      ],
    };
  },
  methods: {
    // 关闭dialog
    handleClosefn() {
      this.$emit("handleClosefn");
    },
    // 生成随机数
    renderNum() {
      let num = Math.round(Math.random() * 10000).toString();
      this.createTask.unitId = "PB" + this.padLeft(num, 4);
      console.log(this.createTask.unitId);
    },
    // 向左自动补位
    padLeft(str, lenght) {
      if (str.length >= lenght) return str;
      else return this.padLeft("0" + str, lenght);
    },
    // 表达校验确认创建任务
    createMainTaskfn() {
      this.$refs.createTask.validate(async (valid) => {
        if (valid) {
          // Message.success('校验成功')
          let fromLoc, toloc;
          console.log(this.createTask);
          console.log(this.createTask.toLoc instanceof Array);
          if (this.createTask.toLoc instanceof Array) {
            toloc =
              this.padLeft(this.createTask.toLoc[0], 2) +
              this.padLeft(this.createTask.toLoc[1], 3) +
              this.padLeft(this.createTask.toLoc[2], 2);
            this.createTask.toLoc = toloc;
            console.log(this.createTask,'修改后');
          }
          await createMaintaskApi(this.createTask);
          this.$emit("createMainTaskfn");
          this.handleClosefn();
        } else {
          Message.error("输入内容有误");
        }
        // this.$refs.createTask.resetFields()
      });
    },
    taskTypeChange() {
      this.createTask.fromLoc = "";
      this.createTask.toLoc = ""; // 目的点
      this.createTask.unitId = ""; // 容器编号
    },
  },
};
</script>

<style>
</style>
